<template>
  <el-container>
    <el-header id="Header">
      <el-row id="Control" :gutter="10">
        <!--过滤参数选择-->
        <el-col :span="6">
          <span id="FilterParameters">过滤参数：</span>
          <el-select id="FilterBox" v-model="FilterParameter_value" placeholder="请选择" title="过滤参数:">
            <el-option
              v-for="item in FilterParameters"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <!--查找输入框-->
        <el-col :span="1">
          <span id="Value">值：</span>
        </el-col>
        <el-col :span="4">
          <el-input v-model="CompleteValue" placeholder="请输入内容" />
        </el-col>
        <!--查找、新增功能按钮-->
        <el-col :span="13">
          <el-button id="Find" type="primary" @click="Find()">过滤</el-button>
          <el-button id="recover" type="primary" @click="dealData()">取消过滤</el-button>
          <el-button id="Add" type="success" @click="AddVisible = true, RegionVisible = true, getAllUserId()">新增</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main id="Main" :style="myStyle">
      <el-table
        :data="tableData"
        height="100%"
        border
        style="width: 87.8rem"
        :cell-class-name="tableCellClassName"
        @cell-mouse-enter="getNowRow"
      >
        <!--序号-->
        <el-table-column
          width="50"
          type="index"
          label="序号"
        />
        <!--用户名-->
        <el-table-column
          prop="name"
          label="用户名称"
        />
        <!--登录名-->
        <el-table-column
          prop="userName"
          label="登录名称"
        />
        <!--所属区域ID-->
        <el-table-column
          prop="areaId"
          label="所属区域ID"
        />
        <!--电话-->
        <el-table-column
          prop="phone"
          label="电话"
        />
        <!--邮箱-->
        <el-table-column
          prop="email"
          label="邮箱"
        />
        <!--操作栏-->
        <el-table-column
          label="操作"
          width="180"
        >
          <template slot-scope="scope">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-button type="primary" @click="ReviseVisible = true, Revise(scope.row)">修改</el-button>
              </el-col>
              <el-col :span="12">
                <el-button type="danger" @click="Del(scope.row)">删除</el-button>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer id="Footer">
      <!--分页功能-->
      <!--当前行数与总数据条数-->
      <el-row>
        <el-col :span="10">
          <div id="now_line_number">第 {{ nowRow }} 条/共 {{ totalNumber }} 条数据</div>
        </el-col>
        <el-col :span="14">
          <div>
            <el-pagination
              id="controlBigPosition"
              background
              :current-page="currentPage"
              :page-sizes="[20, 50, 100, 200, 300]"
              :page-size="size"
              layout="sizes, prev, pager, next, jumper"
              :total="totalNumber"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
            <el-button id="controlPosition" type="primary" round>跳转</el-button>
          </div>
        </el-col>
      </el-row>
    </el-footer>

    <!--新增用户弹窗-->
    <el-dialog top="13vh" title="新增用户" :visible.sync="AddVisible" width="30%">
      <el-form ref="AddForm" :model="AddForm" label-width="100px">
        <el-form-item label="用户名称">
          <el-input v-model="AddForm.name" />
        </el-form-item>
        <el-form-item label="登录名称">
          <el-input v-model="AddForm.userName" />
        </el-form-item>
        <el-form-item label="登陆密码">
          <el-input v-model="AddForm.password" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="AddForm.email" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="AddForm.phone" />
        </el-form-item>
        <el-form-item label="区域设置">
          <el-input v-model="AddForm.region" disabled="false" placeholder="请在右侧区域框选择绑定" />
        </el-form-item>
        <div v-show="tableCustomerVisible" id="targetTable">
          <el-row :gutter="30">
            <el-col :span="24">
              <el-tooltip class="item" effect="dark" content="输入区域名称进行查询" placement="top">
                <el-input v-model="RegionForm.searchRegionKeyword" placeholder="查询输入" />
              </el-tooltip>
            </el-col>
          </el-row>
          <el-table
            :data="RegionForm.searchRegionInfos"
            height="500"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="id"
              label="区域ID"
            />
            <el-table-column
              prop="name"
              label="区域名称"
            />
            <el-table-column
              label="操作"
            >
              <template slot-scope="scope">
                <el-button type="primary" @click="binding(scope.row,'add')">绑定</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="AddVisible = false,Cancel()">取 消</el-button>
        <el-button type="primary" @click="AddVisible = false, addUser()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改弹窗 -->
    <el-dialog top="20vh" title="修改用户信息" :visible.sync="ReviseVisible" width="30%">
      <el-form ref="ReviseForm" :model="ReviseForm" label-width="80px">
        <el-form-item label="登录名称">
          <el-input v-model="ReviseForm.userName" disabled="false" />
        </el-form-item>
        <el-form-item label="用户名称">
          <el-input v-model="ReviseForm.name" />
        </el-form-item>
        <el-form-item label="登录密码">
          <el-input v-model="ReviseForm.password" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="ReviseForm.phone" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="ReviseForm.email" />
        </el-form-item>
        <el-form-item label="区域名称">
          <el-input v-model="ReviseForm.region" disabled="false" />
        </el-form-item>
        <div v-show="tableCustomerVisible" id="targetTable">
          <el-row :gutter="30">
            <el-col :span="24">
              <el-tooltip class="item" effect="dark" content="输入区域名称进行查询" placement="top">
                <el-input v-model="RegionForm.searchRegionKeyword" placeholder="查询输入" />
              </el-tooltip>
            </el-col>
          </el-row>
          <el-table
            :data="RegionForm.searchRegionInfos"
            height="500"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="id"
              label="区域ID"
            />
            <el-table-column
              prop="name"
              label="区域名称"
            />
            <el-table-column
              label="操作"
            >
              <template slot-scope="scope">
                <el-button type="primary" @click="binding(scope.row,'revise')">绑定</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ReviseVisible = false,Cancel()">取 消</el-button>
        <el-button type="primary" @click="ReviseVisible = false, ReviseCommit()">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import { getAllUser, AddUser, DelUser, getAllRegion, searchUserByUsername, searchUserByPhone, searchUserByRegion, searchUserByEmail, ReviseUser } from '@/api/userManager.js'
import { logout } from '@/api/user.js'
export default {
  name: 'User',
  data() {
    return {
      myStyle: {
        height: '29rem'
      },
      controlWidth: {
        width: '100%'
      },
      //* ******************控制区*******************
      // 过滤参数
      FilterParameters: [
        {
          value: 'userName',
          label: '登录名称'
        }, {
          value: 'region',
          label: '所属区域'
        }, {
          value: 'phone',
          label: '电话'
        }, {
          value: 'email',
          label: '邮箱'
        }],
      // 过滤参数
      FilterParameter_value: '',
      // 查找输入框
      CompleteValue: '',
      // 用于显示弹窗
      AddVisible: false, // 添加
      ReviseVisible: false, // 修改
      RegionVisible: false, // 区域
      // 新建的弹窗
      AddForm: {
        name: '',
        userName: '',
        password: '',
        region: '',
        phone: '',
        email: '',
        areaId: ''
      },
      tableCustomerVisible: true,
      RegionForm: {
        searchRegionKeyword: '',
        searchRegionInfos: [],
        allRegionInfos: []
      },
      // 修改的弹窗
      ReviseForm: {
        userId: '',
        userName: '',
        name: '',
        password: '',
        region: '',
        areaId: '',
        phone: '',
        email: ''
      },
      //* ******************中间主体*******************
      // 表格数据
      tableData: [],
      allTableData: [],
      //* ******************分页尾部*******************
      // 分页
      // currentPage进入的第一页是第几页
      currentPage: 1,
      pageSize: 20,
      // 当前行数
      nowRow: 1,
      // 数据总数
      totalNumber: '',
      // 当前页面显示最大数量
      size: 20,
      userName: '',
      account: ''
    }
  },
  watch: {
    // 区域过滤
    'RegionForm.searchRegionKeyword': {
      immediate: true,
      handler(val) {
        this.RegionForm.searchRegionInfos = this.RegionForm.allRegionInfos.filter(p => {
          return p.name.indexOf(val) !== -1
        })
      }
    }
  },
  mounted() {
    this.myStyle = {
      height: document.body.clientHeight - 50 - 30 - 64 - 70 + 'px'
    }
    getAllUser(this.currentPage, this.pageSize).then(request => {
      this.tableData = request.data.records
      this.totalNumber = request.data.total
    })
    getAllRegion(1, 99999).then(request => {
      this.RegionForm.allRegionInfos = request.data.records
      this.RegionForm.searchRegionInfos = request.data.records
    })
  },
  methods: {
    //* ***********************分页************************
    // 处理页面初始数据
    dealData() {
      getAllUser(this.currentPage, this.pageSize).then(request => {
        console.log(request)
        this.totalNumber = request.data.total
        this.tableData = request.data.records
        if (request.message === '未登录') {
          this.$router.push('/login')
          logout()
        }
      }).catch(error => {
        console.log('error',error)
      })

      this.FilterParameter_value = ''
      this.CompleteValue = ''
    },
    // 鼠标放到某一行上就触发
    tableCellClassName({ row, rowIndex }) {
      row.index = rowIndex
    },
    // 鼠标放到某一行上就触发
    getNowRow(row) {
      this.nowRow = row.index + 1 + (this.currentPage - 1) * this.size
    },
    // 每页最大条数
    handleSizeChange(val) {
      this.size = val
      this.currentPage = 1
      this.Find()
    },
    // 当前页数
    handleCurrentChange(val) {
      this.currentPage = val
      this.Find()
    },

    //* ***********************新增与查找按钮************************
    // 新增按钮的事件
    getAllUserId() {
      getAllUser(1, 1000).then(request => {
        this.tableData = request.data.records
      })
    },
    addUser() {
      const addTmpData = {
        'acceptMail': 0,
        'acceptMailCode': '',
        'acceptMailHost': '',
        'areaId': this.AddForm.areaId,
        'avatarUrl': '',
        'createTime': '',
        'customerId': 0,
        'email': this.AddForm.email,
        'id': 0,
        'loginIp': '',
        'loginTime': '',
        'manager': '',
        'name': this.AddForm.name,
        'openid': '',
        'password': this.AddForm.password,
        'phone': this.AddForm.phone,
        'token': '',
        'userName': this.AddForm.userName
      }
      AddUser(addTmpData).then(request => {
        if (request.success) {
          this.$message({
            type: 'success',
            message: '添加成功'
          })
          this.Find()
        } else {
          this.$message({
            message: request.data,
            type: 'warning'
          })
        }
      })
      console.log('areaId:', this.AddForm.areaId)
    },
    // 新增功能弹窗的取消
    Cancel() {
      this.$message('取消成功')
    },
    // 查找按钮的事件
    Find() {
      // 用户名
      // console.log('调用了Find，',this.FilterParameter_value)
      if (this.FilterParameter_value === 'userName') {
        searchUserByUsername(this.currentPage, this.pageSize, this.CompleteValue).then(request => {
          // console.log('res', request);
          this.totalNumber = request.data.total
          this.tableData = request.data.records
        })
      }
      // 区域
      else if (this.FilterParameter_value === 'region') {
        searchUserByRegion(this.currentPage, this.pageSize, this.CompleteValue).then(request => {
          // console.log('res', request);
          this.totalNumber = request.data.total
          this.tableData = request.data.records
        })
      }
      // 电话
      else if (this.FilterParameter_value === 'phone') {
        searchUserByPhone(this.currentPage, this.pageSize, this.CompleteValue).then(request => {
          // console.log('res', request);
          this.totalNumber = request.data.total
          this.tableData = request.data.records
        })
      }
      // 邮箱
      else if (this.FilterParameter_value === 'email') {
        searchUserByEmail(this.currentPage, this.pageSize, this.CompleteValue).then(request => {
          // console.log('res', request);
          this.totalNumber = request.data.total
          this.tableData = request.data.records
        })
      } else {
        this.dealData()
      }
    },
    // 实现绑定
    binding(row, str) {
      if (str == 'add') {
        this.AddForm.region = row.name,
        this.AddForm.areaId = row.id
      } else if (str == 'revise') {
        this.ReviseForm.region = row.name,
        this.ReviseForm.areaId = row.id
      }
    },
    // 修改功能的事件
    Revise(row) {
      this.ReviseForm.userName = row.userName
      this.ReviseForm.userId = row.id
      this.ReviseForm.name = row.name
      this.ReviseForm.email = row.email
      this.ReviseForm.phone = row.phone
    },
    ReviseCommit() {
      const tmpMyData = {
        'acceptMail': 0,
        'acceptMailCode': '',
        'acceptMailHost': '',
        'areaId': this.ReviseForm.areaId,
        'avatarUrl': '',
        'createTime': '',
        'customerId': 0,
        'email': this.ReviseForm.email,
        'id': 0,
        'loginIp': '',
        'loginTime': '',
        'manager': '',
        'name': this.ReviseForm.name,
        'openid': '',
        'password': this.ReviseForm.password,
        'phone': this.ReviseForm.phone,
        'token': '',
        'userName': this.ReviseForm.userName
      }
      ReviseUser(this.ReviseForm.userId, tmpMyData).then(request => {
        // console.log('id', thsi.ReviseForm.userId);
        if (request.success) {
          console.log('id', this.ReviseForm.userId)
          console.log('request', request)
          this.Find()
          this.$message({
            type: 'success',
            message: '修改成功'
          })
        } else {
          this.$message({
            message: request.data,
            type: 'warning'
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        })
      })
    },
    // 删除功能的事件
    Del(row) {
      // console.log('row:',row);
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DelUser(row.id).then(request => {
          if (request.success) {
            this.dealData()
            this.$message({
              type: 'success',
              message: '删除成功'
            })
          } else {
            super.$message({
              message: request.data,
              type: 'warning'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
<style scoped>
  #Header{
    background: #f1f3f4;
  }
  #Find{
    margin-left: 1rem;
  }
  #Control{
    margin-top: 0.8rem;
  }
  .dialog-footer{
    margin: 0 auto;
  }
  #targetTable{
    position: absolute;
    width: 300px;
    top: 1%;
    left:103%;
  }
  /*设置分页属性*/
  #now_line_number{
    font-size: 0.85rem;
    margin-left: 2rem;
    margin-top: 0.6rem;
    color: #606266;
    float:left;
  }
  #paginate{
    float:right;
    margin-right: 2rem;
  }
  #Value{
    line-height: 2.2rem;
    padding-left: 1.2rem;
  }
  #controlPosition{
    display: inline-block;
    position: absolute;
    right: 2rem;
    top: 0;
  }
  #controlBigPosition{
    position: absolute;
    right: 7.2rem;
  }
</style>

